<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/res/third/easyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/res/third/easyUI/themes/icon.css">
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
	.tabs-panels{
		height: 100%;}
</style>
<script type="text/javascript">
	$(function(){
		$("#proTree").tree({
			dnd : true,
		    url:'/category/v_tree.do?pid=0',
		    onContextMenu: onContextMenu,
			onDrop : function(target , source , point){
		    	var targetId = $("#proTree").tree('getNode', target).id;
		    	var sourceId = source.id;
				$.ajax({
					url : '/category/o_changeParent.do',
					type : 'post' ,
					data : {targetId : targetId , sourceId : sourceId}
				});
			},
//			onBeforeDrop : function (target, source, point)
//			{
//				console.log(target);
//			},
		    onLoadSuccess : function(row , data){
			    if(data.length == 0){
			    	$("#addButton").show();
				}
			},
			onBeforeExpand:function(node,param){
				$("#proTree").tree('options').url = '/category/v_tree.do?pid='+node.id;
			},
			onClick : function(node){
				if(node.attributes.cateType == 3){
					$("#center").load('/repository/v_list.do?so_pid='+node.id , function(){
						$.messager.progress('close');
					});
					$("#productattribute").load('/category/v_productattribute_list.do?so_id='+node.id);
					$("#productseo").load('/category/v_productseo_list.do?so_id='+node.id);
					$("#brand").load('/categoryBrand/v_list.do?so_pid='+node.id);
				}else{
					$("#center").html("");
					$("#productattribute").html("");
					$("#productseo").html("");
					$.messager.progress('close');
				}
			}
		});
		
	});
	
	//右键
	function onContextMenu(e,row){
	      e.preventDefault();
	      $(this).tree('select', row.target); 
	      $('#mm').menu('show',{
	          left: e.pageX,
	          top: e.pageY
	      });
	}
	
	var dialog;
	function appendp(){
		//新建同级节点
		document.categoryFormName.reset();
		var node = $('#proTree').tree('getSelected');
		var hasp = $('#proTree').tree("getParent",node.target);
		if(hasp==null){//没有父节点
		    	$("#parent_id").val(0);//父节点则为0	
		}else{
		        $("#parent_id").val(hasp.id);
		}
	    dia("新增同级");
	}
	//增子级
	function appendc(){
		//新建子级节点
		document.categoryFormName.reset();
		var node = $('#proTree').tree('getSelected');
		$("#parent_id").val(node.id);
		dia("新增子级");
	}

	function dia(title){//弹窗
	   dialog = art.dialog({
	        title: title,
	        width:500,
	        lock:true,
	        content: document.getElementById('create')
	    });
	}
	//提交
	function subc(){
		var name = $("#name").val();
		var code = $("#code").val();
		if(name.trim() == ''){
			 art.dialog.tips("请填写类目名称");
			 return  false;
		}
		if(code.trim() == ''){
			art.dialog.tips("请填写类目编码");
			 return  false;
		}
		
		$.ajax({
			   type: "POST",
			   dataType:"json",
			   url: "/category/o_add.do",
			   data:$("form").serialize(),
			   beforeSend:function(){
				   artDialog.tips("提交中...." , 5000);
			   },
			   success: function(data){
				   if(data.success){
//	 				   succ_msg(data.msg , function(){location.reload();});
	                 location.reload();
				   }else{
					   art.dialog.alert(data.msg , function(){location.reload();});
				   }
			   }
		});
	}
	//编辑
	function editcurrent(){
		var node = $('#proTree').tree('getSelected');
		$("#id").val(node.id);
		$("#name").val(node.text);
		$("#code").val(node.code);
		var catetype = node.attributes.cateType;
		if(catetype){
			$("#cateType > option").each(function(){
				if($(this).attr("value") == catetype){
					$(this).attr("selected" , true);
				}else{
					$(this).attr("selected" , false);
				}
			});
		}
		dia("编辑");
	}

	//删除
	function delc(){
		var node = $('#proTree').tree('getSelected');
		art.dialog.confirm("子类目及类目下仓库数据都将一并删除，是否确认删除？" , function(){
			$.ajax({
				   type: "get",
				   dataType:"json",
				   url: "/category/o_del.do",
				   data:{id:node.id},
				   beforeSend:function(){
			            artDialog.tips("删除中...." , 5000);
			        },
				   success: function(data){
					   if(data.success){
						   location.reload();
					   }else{
						   error_msg(data.msg , function(){location.reload()});	
					   }
				   }
			});
		});
	}

	//新增第一条记录
	function addChannel(){
		$("#parent_id").val(0);
		dia("新增根节点");
	}
	
</script>
</head>

<body>
<!-- 右键 -->
<div id="mm" class="easyui-menu" style="width:120px;">  
    <div onclick="appendp()"  >新建同级</div>
    <div onclick="appendc()"  >新建子级</div>
    <div onclick="editcurrent()"  >编辑</div>
    <div class="menu-sep"></div>  
    <div onclick="delc();" >删除</div>  
</div> 


<!-- 新建 -->
<div id="create"  style="display: none;"   >
	<form  class="form-horizontal" name="categoryFormName"  role="form"   >
	<input type="hidden"  name="pid"  id="parent_id"   />
	<input type="hidden"  name="id"  id="id" />
	  <div class="form-group">
	    <label>类目名称</label>
	      <input class="form-control" id="name" name="name"  required />
	  </div>
	  <div class="form-group">
	    <label for="code" >类目编码</label>
	      <input  class="form-control" id="code"  name="code" required />
	  </div>
	  <div class="form-group">
	    <label for="code" >类目类别</label>
	    <select class="form-control" name="cateType" id="cateType">
	    	[#list cateTypes as ct]
	    		<option value="${ct.getIndex()}">${ct.getName()}</option>
	    	[/#list]
	    </select>
	  </div>
	  <div class="form-group">
	    <div style="text-align: center;" >
	      <button  onclick="subc();"  type="button" class="btn btn-info">提交</button>
	    </div>
	  </div>
	</form>
</div>


	<div class="easyui-layout" style="width:100%;height:100%;">
		<!-- <div data-options="region:'north'" style="height:50px"></div>
		<div data-options="region:'south',split:true" style="height:50px;"></div>
		<div data-options="region:'east',split:true" title="East" style="width:100px;"></div> -->
		<div data-options="region:'west',split:true" title="类目树" style="width:200px;">
			<button type="button" class="btn btn-info" id="addButton" onclick="addChannel();" style="display : none;margin: 24px 0 0 66px;">新增</button>
			<ul class="" style="padding:10px" id="proTree">
			</ul>
		</div>
		<div id="tt" data-options="region:'center'" class="easyui-tabs" >  
			 <div id="center" title="产品仓库" >  
             </div>
              <div id="productattribute" style="height: auto;" title="产品属性" >  
              </div>  
              <div id="productseo" title="产品SEO设置" >  
              </div>
              <div id="brand" title="产品品牌" >  
              </div>  
		</div>
	</div>
</body>
</html>
